<template>
	<view class="main">
		<!-- <u-tabs class="tab" :activeStyle="{
		         color: '#EA504F',
		         fontWeight: 'bold',
		     }" :inactiveStyle="{
		         color: '#000',
		     }" :list="tab" @click="click" lineColor="#EA504F"></u-tabs> -->
		<view class="lists">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="label">
						<view class="title">名称：</view>
						<text>{{item.config.name}}</text>
					</view>
					<view class="status">{{item.status != 5 ? '进行中' : item.is_bonus == 1 ? '已中奖' : '未中奖'}}</view>
				</view>
				<view class="label">
					<view class="title">开始时间：</view>
					<text>{{item.date}}&nbsp;&nbsp;{{item.config.start_time_text}}</text>
				</view>
				<view class="label">
					<view class="title">结束时间：</view>
					<text>{{item.date}}&nbsp;&nbsp;{{item.config.end_time_text}}</text>
				</view>
				<view class="label">
					<view class="title">开奖时间：</view>
					<text>{{item.date}}&nbsp;&nbsp;{{item.config.bonus_time_text}}</text>
				</view>
				<!-- <view class="label" v-if="item.status == 5">
					<view class="title">是否中奖：</view>
					<text>{{item.is_bonus ? '是' : '否'}}</text>
				</view> -->
			</view>
		</view>
		<u-empty mode="list" v-if="list.length == 0"></u-empty>
	</view>
</template>

<script>
	import {
		groupsLists
	} from '@/api/index.js'
	export default {
		data() {
			return {
				tab: [{
						name: '全部',
						id: -1
					},
					{
						name: '已成功',
						id: 1
					},
					{
						name: '未成功',
						id: 10
					}
				],
				list: [],
				status: '',
				page: 1,
				last_page: ''
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.page == this.last_page) {
				uni.showToast({
					title: '已经是最后一页了',
					icon: 'none'
				})
			} else {
				this.page++
				this.getList()
			}
		},
		methods: {
			click(e) {
				this.status = e.id
				this.getList()
			},
			async getList() {
				let res = await groupsLists({
					page: this.page
				})
				this.list = res.data.data
				this.last_page = res.data.last_page
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: calc(100vh - 180rpx);
		background-color: #f6f6f6;

		.lists {
			padding: 24rpx;
			box-sizing: border-box;
			
			.item {
				padding: 24rpx;
				border-radius: 20rpx;
				background-color: #fff;
				box-sizing: border-box;
				margin-bottom: 24rpx;
				
				.status {
					display: flex;
					justify-content: flex-end;
					color: #EA504F;
					margin-bottom: 16rpx;
				}
				
				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				
				.label {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.title {
						font-size: 28rpx;
						font-weight: 500;
					}
					
					text {
						font-size: 28rpx;
					}
				}
			}
		}
	}
	::v-deep .u-tabs__wrapper__nav {
		justify-content: space-around;
	}
	::v-deep .u-tabs__wrapper__nav__line {
		height: 0rpx !important;
	}
</style>